<template>
  <div class="app-container">
    <!-- 个人信息 -->
    <el-form ref="form" :model="detailInfo" :rules="rules" label-width="100px">
      <!--手机 聘用形式  -->
      <el-row class="inline-info">
        <el-col :span="12">
          <el-form-item label="部门" prop="departmentName">
            <el-input v-model="detailInfo.departmentName" @focus="showTree" />
            <!-- 封装的树形结构 -->
            <div v-show="isshowTree">
              <TreeList :trans-tree-list="transTreeList" :isshow-tree.sync="isshowTree" @getInputName="getInputName" />
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 工号 入职时间 -->
      <el-row class="inline-info">
        <el-col :span="12">
          <el-form-item label="入职时间" prop="timeOfEntry">
            <el-date-picker
              v-model="detailInfo.timeOfEntry"
              time-of-entry
              type="date"
              class="inputW"
              value-format="yyyy-MM-dd"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 员工照片 -->
      <el-row class="inline-info">
        <el-col :span="12">

          <el-form-item label="员工头像">
            <!-- 放置上传图片 -->
            <!-- <el-image :src="require('@/assets/common/head.jpg')"></el-image> -->
            <!-- 对自己封装组件传值:功能是从父组件传入默认的图片,让子组件在没有修改图片时,默认显示传入的图片 -->
            <UploadPhoto :photo.sync="detailInfo.staffPhoto" />
          </el-form-item>

        </el-col>
      </el-row>
      <!-- 保存个人信息 -->
      <el-row class="inline-info" type="flex" justify="center">
        <el-col :span="12">
          <el-button type="primary" @click="saveUpdate">保存更新</el-button>
          <el-button @click="$router.back()">返回</el-button>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { getDepartmentsAPI } from '@/api/department.js'
import { tranListToTreeData } from '@/utils/index'
import { saveUserDetailByIdAPI } from '@/api/user'
export default ({

  props: {
    detailInfo: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      isshowTree: false, // 控制树形结构的显示和隐藏
      treeList: [], // 没有经过处理的属性结构
      transTreeList: [], // 处理过的树形结构
      rules: {
        departmentName: [{ required: true, message: '请填写部门', trigger: ['blur', 'change'] }],
        timeOfEntry: [{ required: true, message: '请填写入职时间', trigger: ['blur', 'change'] }]
      }
    }
  },

  methods: {
    async showTree() {
      this.isshowTree = true
      // 调用获取树形结构的方法
      const res = await getDepartmentsAPI()
      this.treeList = res.depts
      this.transTreeList = tranListToTreeData(this.treeList)
    },
    // 从子节点获取到的部门名称
    getInputName(name) {
      // console.log(name)

      // 引用数据类型
      this.detailInfo.departmentName = name
      this.isshowTree = false
    },

    saveUpdate() {
      this.$refs.form.validate(async(isok) => {
        if (isok) {
          await saveUserDetailByIdAPI(this.detailInfo)
          this.$message.success('保存用户数据成功')
        }
      })
    }

  }
})
</script>

